<!-- 内容面版列表 -->
<script lang='ts' setup>
import { ref } from 'vue'
import type { PropType } from 'vue';
import {
    CaretTop, CaretBottom, Edit, Share, Star, Collection
} from '@element-plus/icons-vue'
import type { userContent } from "../../types/write"
const props = defineProps({
    writeDetails: {
        type: Object as PropType<userContent>,
    },
    flagShow: {
        type: Boolean
    }
})
const discussBoxShow = ref(false)
console.log('flagShow', props.writeDetails)
function closeModal() {
    discussBoxShow.value = false
    console.log('我是子钻进', discussBoxShow.value)
}
defineExpose({
    closeModal,
})
</script>
<template>
    <div class="box">
        <!--  帖子简介 -->
        <div>
            <!--  标题层 -->
            <div>
                <h3>{{ props.writeDetails ? props.writeDetails.title : '一起来玩吧' }}</h3>
            </div>
            <!--   个人信息层 -->
            <div class="index_user">
                <div>
                    <el-avatar
                        :src="props.writeDetails?.files ? props.writeDetails?.files : 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'" />
                </div>
                <div style="margin-left:15px ;">
                    <span>{{ props.writeDetails?.email }}</span>
                </div>
            </div>
            <!--   文章内容层 -->
            <div style="display: flex; margin-top: 15px;height: 120px;">
                <slot id="cover" name="cover"></slot>
                <div style="flex: 4;" class="content" v-html="props.writeDetails?.introduce"></div>
            </div>
        </div>
        <!-- <div style="margin-top: 10px; width: 100%;height: 100%;background: pink;">
            123
        </div> -->
        <!-- 底部控制台 -->
        <div>
            <div v-if="props.flagShow">
                <div class="contentFoot">
                    <el-button-group>
                        <el-button color="#4EEE94" type="primary" :icon="CaretTop">赞</el-button>
                        <el-button color="#90EE90" :icon="CaretBottom">踩</el-button>
                    </el-button-group>
                    <div style="margin-left: 25px;">
                        <el-button color="#E0EEEE" type="primary" :icon="Edit" @click="discussBoxShow = true">评论
                        </el-button>
                        <el-button color="#E0EEEE" type="primary" :icon="Share">分享</el-button>
                        <el-button color="#E0EEEE" type="primary" :icon="Star">收藏</el-button>

                    </div>
                    <div style="margin-left:100px;">
                        <el-button color="#E0EEEE" type="primary" :icon="Collection">详情</el-button>
                    </div>
                </div>
                <slot name="discussBox" v-if="discussBoxShow">
                    {{ discussBoxShow }}
                </slot>
            </div>
        </div>
    </div>
</template>
<style lang='scss' scoped>
$contentHeight: 55px; //文本内容高度

//这两句是为了照顾低版本浏览器
.box {
    padding: 15px;
    height: 300px;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.651);
    box-shadow: -1px 1px 2px 1px rgba(56, 56, 58, 0.2);

    .content {
        padding: 15px;
        height: $contentHeight;
        overflow: hidden;
    }

    .contentFoot {
        display: flex;
        margin-top: 25px;
    }

    .index_user {
        display: flex;
        margin-top: 10px;
        align-items: center;
    }
}
</style>
